@import './common.less';
.search-bar {
    background-image: url('../img/pink-back.jpg');
    background-size: 750px 94px;
    height: 94px;
}

.banner {
    overflow: hidden;
    img {
        width: 750px;
        display: block;
        height: 380px;
    }
}

.content {
    background-color: #fafafa;
    padding: 0 30px 130px;
    overflow: hidden;
}

.section {
    overflow: hidden;
    &:nth-of-type(2) .icon.icon-types {
        background-position-x: 0px;
    }
    &:nth-of-type(4) .icon.icon-types {
        background-position-x: -50px;
    }
    &:nth-of-type(5) .icon.icon-types {
        background-position-x: -100px;
    }
    &:nth-of-type(3) .icon.icon-types {
        background-position-x: -150px;
    }
    &:nth-of-type(1) .icon.icon-types {
        background-position-x: -200px;
    }
    &:nth-of-type(6) .icon.icon-types {
        background-position-x: -250px;
    }
    .sign {
        height: 90px;
        line-height: 90px;
        font-size: 28px;
        /*px*/
        color: @c333;
        h4 {
            float: left;
        }
        .icon {
            width: 50px;
            height: 50px;
            margin-top: 20px;
            background-size: 300px 50px;
            background-repeat: no-repeat;
            float: left;
            margin-right: 15px;
            &.icon-types {
                background-image: url('../img/icon-types.png');
            }
        }
    }
    .list {
        display: flex;
        justify-content: space-between;
    }
    .item {
        overflow: hidden;
        width: 328px;
        height: 468px;
        background-color: @cfff;
        border: 2px solid #eee;
        position: relative;
        .pic {
            width: 320px;
            height: 320px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            img {
                position: absolute;
                max-width: 220px;
                max-height: 220px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .price-wrap {
            height: 56px;
            line-height: 56px;
            position: absolute;
            bottom: 92px;
            left: 0;
            width: 328-60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            .now {
                color: #e60012;
                font-size: 28px;
                /*px*/
            }
            .before {
                color: @c666;
                text-decoration: line-through;
                font-size: 24px;
                /*px*/
            }
        }
        .title {
            height: 92px;
            font-size: 28px;
            padding: 0 22px;
            /*px*/
            color: @c666;
            line-height: 36px;
            position: absolute;
            width: calc(100%-22px);
            bottom: 0;
            left: 0;
        }
    }
}